<!--
 * @Author: your name
 * @Date: 2021-06-23 21:49:08
 * @LastEditTime: 2022-11-21 10:38:11
 * @LastEditors: pmy
 * @Description: In User Settings Edit
 * @FilePath: \bdcar-net\src\components\theOne\switchTabs.vue
-->
<template>
  <div style="background:#fff;display:flex">
    <el-tabs v-model="editableTabsValue" type="card" :closable="editableTabs.length > 1" @tab-remove="removeTab"
      class="myElTab" @tab-click="handleClick" v-show="editableTabs.length > 0">
      <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
        {{ item.content }}
      </el-tab-pane>
    </el-tabs>
    <div class="clear-btn" @click="clearTabs"><img src="@/assets/img/nav/clearTabs.png" />清除标签</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      editableTabsValue: '',
      editableTabs: [],
    };
  },
  components: {},
  computed: {
    activeMenu() {
      return this.$store.state.activeMenu;
    },
  },
  created() { },
  mounted() { },
  methods: {
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      //移除点击的菜单
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      this.$store.dispatch("updateActiveMenuList", this.editableTabs);
      //删除以后默认高亮最后一个
      this.editableTabsValue = this.editableTabs[this.editableTabs.length - 1].name;
      this.$store.dispatch("updateActiveMenu", this.editableTabsValue);
    },
    addTab(targetName) {
      //设置高亮标签页
      this.editableTabsValue = this.activeMenu;
      //循环找到英文对应中文名
      let tabName = "";
      this.$store.state.availableMenuList.forEach(v => {
        v.children.forEach(vv => {
          if (vv.index == targetName) tabName = vv.name
        })
      })
      //判断菜单列表中是否已存在，若已存在则不再添加
      let flag = this.editableTabs.some(function (v) {
        return v.name == targetName
      })
      if (!flag) {
        this.editableTabs.push({
          title: tabName,
          name: targetName,
          content: targetName
        });
        this.$store.dispatch("updateActiveMenuList", this.editableTabs);
      }
    },
    clearTabs() {
      let activeName = this.editableTabsValue;
      // 找到当前页面保留
      let saveTab = this.editableTabs.find(function (v) {
        return v.name == activeName
      })
      this.editableTabs = [saveTab];
      this.$store.dispatch("updateActiveMenuList", this.editableTabs);
    },
    //点击以后向store传递点击的什么
    handleClick(tab, event) {
      this.$store.dispatch("updateActiveMenu", tab.name);
    },
  },
  watch: {
    activeMenu: {//深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        if (val != oldVal) {
          this.addTab(val)
        }
      },
      deep: true, //true 深度监听
      // immediate: true
    }
  }
}
</script>
<style lang='less' scoped>
.myElTab {
  width: 80%;
  display: inline-block;
  margin-left: 20px;
}

.clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  margin-left: auto;
  margin-right: 20px;
  cursor: pointer;

  img {
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }
}

::v-deep .el-tabs--card>.el-tabs__header {
  border: 0;

  .el-tabs__nav {
    border: 0;
  }

  .el-tabs__item {
    height: 34px;
    line-height: 34px;
    margin-top: 3px;
    border-bottom: 0;
    background: #eeedec;
    color: rgba(0, 0, 0, 0.5);

    &.is-active {
      background: #fff;
      color: #0066ff;
    }
  }
}
</style>